<template>
    <div>
        <div class="text-xl mt-3">【数据关系传递】</div>
        <div ref="chart" class="w-full h-full"></div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
const colorList = [
    "#C1232B",
    "#B5C334",
    "#FCCE10",
    "#E87C25",
    "#27727B",
    "#FE8463",
    "#9BCA63",
    "#FAD860",
    "#F3A43B",
    "#60C0DD",
    "#D7504B",
    "#C6E579",
    "#F4E001",
    "#F0805A",
    "#26C0C0",
];
let mychart = null
const chart = ref(null)
const props = defineProps(['data'])

const option = ref({
    xAxis: {
        show: false,
        type: 'value'
    },
    yAxis: {
        show: false,
        type: 'value'
    },
    grid: {
        top: 30,
        left: 0,
        right: 30,
        bottom: 0,
        containLabel: true
    },
    series: [
        {
            type: 'graph',
            coordinateSystem: 'cartesian2d',
            // layout: 'none',
            symbolSize: 26,
            z: 3,
            edgeLabel: {
                normal: {
                    show: true,
                    color: '#fff',
                    formatter: (params) => params.data.speed
                }
            },
            label: {
                show: true,
                position: 'bottom',
                color: '#fff'
            },
            edgeSymbol: ['none', 'arrow'],
            edgeSymbolSize: 8,
            data: props.data.relations.map(i => {
                if (i.id != 0) {
                    return {
                        name: i.name,
                        // category: 0,
                        // active: true,
                        speed: i.speed + 'kb/s',
                        value: i.value
                    }
                } else {
                    return {
                        name: i.name,
                        value: i.value,
                        symbolSize: 100,
                        itemStyle: {
                            color: {
                                colorStops: [
                                    { offset: 0, color: '#157eff' },
                                    { offset: 1, color: '#35c2ff' }
                                ]
                            }
                        },
                        label: {
                            fontSize: '14',
                        }
                    }
                }
            }),
            links: props.data.relations.map(i => ({
                source: i.source,
                target: i.target,
                speed: i.speed + 'kb/s',
                lineStyle: {
                    normal: {
                        color: '#12b5d0',
                        curveness: 0.2
                    }
                },
                label: {
                    show: true,
                    position: 'middle',
                    offset: [10, 0]
                }
            }))
        },
        {
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            z: 1,
            effect: {
                show: true,
                smooth: false,
                trailLength: 0,
                symbol: 'arrow',
                symbolSize: 12,
                color: 'rgba(55,155,255,.6)',
            },
            lineStyle: {
                normal: {
                    curveness: 0.2
                }
            },
            data: [
                [{ coord: [0, 300] }, { coord: [50, 200] }],
                [{ coord: [0, 100] }, { coord: [50, 200] }],
                [{ coord: [50, 200] }, { coord: [100, 100] }],
                [{ coord: [50, 200] }, { coord: [100, 300] }]
            ]
        }
    ]
})
const initChart = () => {
    mychart.setOption(option.value)
}
onMounted(() => {
    mychart = echarts.init(chart.value)
    initChart()
})
window.addEventListener('resize', () => {
    mychart.resize()
})
</script>
